<template>
  <div class="company-address-main">

    <el-card shadow="never">
      <div slot="header">
        <el-button type="primary" size="small" @click="goAdd">新增地址</el-button>

      </div>
      <el-table :data="addressList" border stripe>
        <el-table-column
          type="index"
          label="#"
          :width="50"
        />
        <el-table-column
          label="收货人信息"
          :width="300"
        >
          <template slot-scope="scope">
            <p>收货人姓名: {{ scope.row.name }}</p>
            <p>收货人电话: {{ scope.row.phone }}</p>
            <p>详细地址: {{ scope.row.detailAddress }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="addressName"
          label="地址信息"
          :width="200"
        />
        <!-- sendStatus== 1 为默认发货地址 -->
        <el-table-column
          label="是否默认发货地址"
          :width="200"
        >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.sendStatus" :active-value="1" :inactive-value="0" @change="sendStateChange(scope.row.id,scope.row.sendStatus)" />
          </template>
        </el-table-column>
        <el-table-column
          label="是否默认收货地址"
          :width="200"
        >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.receiveStatus" :active-value="1" :inactive-value="0" @change="receiveStateChange(scope.row.id)" />
          </template>
        </el-table-column>

        <el-table-column
          label="创建时间"
          prop="createTime"
          :width="200"
        />
      </el-table>

    </el-card>
    <AddressDetail ref="dialog" />
  </div>
</template>

<script>
import { addressList as addressListApi,
  setSendOne as setSendOneApi,
  setReceiveOne as setReceiveOneApi
} from '@/api/order/address'
import AddressDetail from './Detail'
export default {
  components: {
    AddressDetail
  },
  data() {
    return {
      addressList: []
    }
  },
  computed: {

  },
  created() {
    // 初始化地址信息
    this.getAddressList()
  },
  mounted() {

  },
  methods: {
    getAddressList() {
      addressListApi()
        .then(res => {
          const { success, data, message: errMsg } = res
          if (success) {
            const { items } = data
            // 赋值
            this.addressList = items
          } else {
            this.$message.error(errMsg)
          }
        })
    },
    // 状态发生变化时触发
    sendStateChange(id, state) {
      // console.log(id, state)
      setSendOneApi({ id })
        .then(res => {
          const { success, message: errMsg } = res
          if (success) {
            this.$message.success('修改状态成功!')
            // 更新页面,因为其余的会因为这个状态变化而受影响
            this.getAddressList()
          } else {
            this.$message.error(errMsg)
          }
        })
    },
    receiveStateChange(id) {
      // console.log(id, state)
      setReceiveOneApi({ id })
        .then(res => {
          const { success, message: errMsg } = res
          if (success) {
            this.$message.success('修改状态成功!')
            // 更新页面,因为其余的会因为这个状态变化而受影响
            this.getAddressList()
          } else {
            this.$message.error(errMsg)
          }
        })
    },
    // 新增
    goAdd() {
      // 父子交互,父类组件调用子组件方法
      this.$refs.dialog.openDialog()
      // this.$refs.dialog.$emit('childmethods')
    }
  }
}
</script>

<style scoped lang="scss">

</style>
